<template>
    <div class="check">
        <van-field
                class="four"
                v-model="params.hospital"
                label="预约医院"
                type="text"
                placeholder="请输入"
                input-align="right"
                required
        />
        <van-cell :value="params.makeDate" is-link @click="handleShowOrderDate">
            <template slot="title">
                <span class="custom-title">预约日期</span>
                <span style="color: #FF5E71;">*</span>
            </template>
        </van-cell>
        <van-cell :value="params.makeTime" is-link @click="handleShowOrderTime">
            <template slot="title">
                <span class="custom-title">预约时间</span>
                <span style="color: #FF5E71;">*</span>
            </template>
        </van-cell>

        <div class="toggle-box flex-box-align" :class="{'fixed-box': isFixed}" @click="handleToggle">
            <img :src="isFold ? require('../images/closeeye@2x.png') : require('../images/eye@2x.png')" />
            <span>{{isFold ? '全部收起' : '显示全部'}}</span>
        </div>

        <van-cell class="special-item" :label-class="['label-2', isFold ? '' : 'hide']" style="align-items: flex-end">
            <template slot="title">
                <div class="flex-box-align">
                    <div class="flex">
                        <span class="custom-title">检查方式</span>
                        <span style="color: #FF5E71;">*</span>
                    </div>
                    <van-icon name="success" color="#2691FF" size="22" v-show="!isFold && params.reviewMode"/>
                </div>
            </template>
            <template slot="label">
                <van-radio-group v-model="params.reviewMode">
                    <div class="flex-box-align div">
                        <span class="flex">普通</span>
                        <van-radio name="普通" shape="square"></van-radio>
                    </div>
                    <div class="flex-box-align div">
                        <span class="flex">无痛检查</span>
                        <van-radio name="无痛检查" shape="square"></van-radio>
                    </div>
                </van-radio-group>
            </template>
        </van-cell>

        <van-cell class="special-item" :label-class="[isFold ? '' : 'hide']" style="align-items: flex-end">
            <template slot="title">
                <div class="flex-box-align">
                    <div class="flex">
                        <span class="custom-title">服用泻药</span>
                        <span style="color: #FF5E71;">*</span>
                    </div>
                    <van-icon name="success" color="#2691FF" size="22" v-show="!isFold && params.isLaxative"/>
                </div>
            </template>
            <template slot="label">
                <div class="flex-box-align">
                    <span class="flex">和爽</span>
                    <van-checkbox v-model="params.isLaxative" shape="square"></van-checkbox>
                </div>
            </template>
        </van-cell>

        <van-cell class="special-item" :label-class="['label-2', isFold ? '' : 'hide']" style="align-items: flex-end">
            <template slot="title">
                <div class="flex-box-align">
                    <div class="flex">
                        <span class="custom-title">用药原因</span>
                        <span style="color: #FF5E71;">*</span>
                    </div>
                    <van-icon name="success" color="#2691FF" size="22" v-show="!isFold && params.medicalReasons"/>
                </div>
            </template>
            <template slot="label">
                <van-radio-group v-model="params.medicalReasons">
                    <div class="flex-box-align div">
                        <span class="flex">检查</span>
                        <van-radio name="检查" shape="square"></van-radio>
                    </div>
                    <div class="flex-box-align div">
                        <span class="flex">手术</span>
                        <van-radio name="手术" shape="square"></van-radio>
                    </div>
                </van-radio-group>
            </template>
        </van-cell>

        <van-cell class="special-item" :label-class="['label-2', isFold ? '' : 'hide']" style="align-items: flex-end">
            <template slot="title">
                <div class="flex-box-align">
                    <div class="flex">
                        <span class="custom-title">原患疾病（可多选）</span>
                    </div>
                    <van-icon name="success" color="#2691FF" size="22" v-show="!isFold && etiology.some( item => {return item.value;})"/>
                </div>
            </template>
            <template slot="label">
                <div class="flex-box-align" v-for="(item, index) in etiology" :key="index">
                    <span class="flex">{{item.label}}</span>
                    <van-checkbox v-model="item.value" shape="square"></van-checkbox>
                </div>
            </template>
        </van-cell>

        <van-cell class="special-item" :label-class="['label-2', isFold ? '' : 'hide']" style="align-items: flex-end">
            <template slot="title">
                <div class="flex-box-align">
                    <div class="flex">
                        <span class="custom-title">合并用药（可多选）</span>
                    </div>
                    <van-icon name="success" color="#2691FF" size="22" v-show="!isFold && drugCombination.some( item => {return item.value;})"/>
                </div>
            </template>
            <template slot="label">
                <div class="flex-box-align" v-for="(item, index) in drugCombination" :key="index">
                    <span class="flex">{{item.label}}</span>
                    <van-checkbox v-model="item.value" shape="square"></van-checkbox>
                </div>
            </template>
        </van-cell>

        <van-cell title="补充信息" label-class="textarea">
            <template slot="label">
                <van-field
                        v-model="params.remark"
                        rows="4"
                        autosize
                        type="textarea"
                />
            </template>
        </van-cell>

        <div class="fixed-bottom">
            <van-button type="info" @click="handleSubmit">提交</van-button>
        </div>


        <van-popup
                v-model="showOrder"
                position="bottom"
                :style="{ height: '50%' }"
        >
            <van-datetime-picker
                    v-model="currentDate"
                    type="date"
                    @confirm="handleConfirmOrder"
                    @cancel="showOrder = false"
                    v-show="type === 'date'"
            />
            <van-picker
                    show-toolbar
                    :columns="columns"
                    @cancel="showOrder = false"
                    @confirm="handleConfirmTime"
                    v-show="type === 'time'"
            />
        </van-popup>
    </div>
</template>
<script>
    import format from 'date-fns/format';
    import { caseReportAdd } from "../constants/api";
    import https from "../https";
    import { Toast, Notify } from 'vant';
    let boxY;
    export default {
        components: {
        },
        data() {
            return {
                showOrder: false,
                currentDate: new Date(),
                currentTime: format(new Date(), 'hh:mm'),
                type: '',
                height: '',
                checked: false,
                message: '',
                columns: ['上午', '下午'],
                isFixed: false,
                isFold: true,
                params: {
                    hospital: '',
                    makeDate: '请选择',
                    makeTime: '请选择',
                    reviewMode: '',
                    isLaxative: false,
                    medicalReasons: '',
                    etiology: '',
                    drugCombination: '',
                    remark: ''
                },
                etiology: [{
                    label: '结直肠癌风险筛查',
                    value: false
                },{
                    label: '息肉切除术后监测',
                    value: false
                },{
                    label: '便血',
                    value: false
                },{
                    label: '贫血',
                    value: false
                },{
                    label: '炎症性肠病',
                    value: false
                },{
                    label: '肠道习惯改变',
                    value: false
                },{
                    label: '其他',
                    value: false
                }],
                drugCombination: [{
                    label: '血管紧张素转酶抑制剂',
                    value: false
                },{
                    label: '非甾体类抗炎药NSAID',
                    value: false
                },{
                    label: '利尿剂',
                    value: false
                },{
                    label: '胰岛素',
                    value: false
                },{
                    label: '口服降血糖药',
                    value: false
                },{
                    label: '促胃肠动力药物',
                    value: false
                },{
                    label: '三环类抑郁药物',
                    value: false
                },{
                    label: '阿片类',
                    value: false
                },{
                    label: '钙拮抗剂',
                    value: false
                },{
                    label: '祛泡剂',
                    value: false
                },]
            }
        },
        mounted() {
            window.addEventListener('scroll',this.handleScroll);
            boxY = this.$el.querySelector('.toggle-box').offsetTop;
        },
        methods: {
            handleScroll() {
                let scrollY = document.documentElement.scrollTop || document.body.scrollTop
                if (scrollY >= boxY) {
                    this.isFixed = true;
                } else {
                    this.isFixed = false;
                }
            },
            handleToggle() {
                this.isFold = !this.isFold;
            },
            handleShowOrderDate() {
                this.type = 'date';
                this.showOrder = true;
            },
            handleShowOrderTime() {
                this.type = 'time';
                this.showOrder = true;

            },
            handleConfirmOrder(val) {
                this.params.makeDate = format(val, 'YYYY-MM-DD');
                this.showOrder = false
            },
            handleConfirmTime(val) {
                this.params.makeTime = val
                this.showOrder = false
            },
            async handleSubmit() {
                const { hospital, makeDate, makeTime, isLaxative, reviewMode, medicalReasons} = this.params
                if (!hospital) {
                    Notify({ type: 'warning', message: '请输入预约医院' });
                    return;
                }
                if (!makeDate) {
                    Notify({ type: 'warning', message: '请选择预约日期' });
                    return;
                }
                if (!makeTime) {
                    Notify({ type: 'warning', message: '请选择预约时间' });
                    return;
                }
                if (!reviewMode) {
                    Notify({ type: 'warning', message: '请选择检查方式' });
                    return;
                }
                if (!medicalReasons) {
                    Notify({ type: 'warning', message: '请选择用药原因' });
                    return;
                }
                Toast.loading({
                    message: '加载中...',
                    forbidClick: true,
                    duration: 0
                });
                this.params.etiology = this.etiology.filter( item => {
                    return item.value;
                }).map(item => {
                    return item.label
                }).join(",");

                this.params.drugCombination = this.drugCombination.filter( item => {
                    return item.value;
                }).map(item => {
                    return item.label
                }).join(",");

                this.params.isLaxative = this.params.isLaxative ? 'y' : 'n';
                const paramsStorage = JSON.parse(localStorage.getItem('params'));
                this.params = {
                    ...paramsStorage,
                    ...this.params
                }
                const json = await https.fetchPost(caseReportAdd, this.params);
                if (json.data.code === 200) {
                    Toast.success('提交成功');
                    setTimeout( () => {
                        this.$router.push("/me")
                    }, 2000)
                } else {
                    Toast.clear()
                    Notify({ type: 'warning', message: json.data.data.errMsg });
                }
            },

        }
    };
</script>
<style lang="scss" scoped>
    .check {
        height: 100%;
        background-color: #FAFAFA;
        .toggle-box {
            justify-content: flex-end;
            height: .6rem;
            line-height: .6rem;
            img {
                width: .3rem;
                vertical-align: middle;
            }
            span {
                font-size: .26rem;
                color: #2691FF;
                margin-left: .18rem;
                margin-right: .36rem;
            }
        }
        .fixed-box {
            position: fixed;
            width: 100%;
            top: 0;
            left: 0;
            background-color: #FAFAFA;
            z-index: 9;
        }
        .textarea {
            .van-field {
                background-color: #F2F2F2;
            }
        }
        .fixed-bottom {
            width: 100%;
            height: 1.26rem;
            line-height: 1.26rem;
            text-align: center;
            box-shadow:0px -.03rem .1rem 0px rgba(220, 252, 240, 0.35);
            margin-top: .67rem;
        }

        .hide {
            display: none;
        }
    }
</style>

